package fr.babos.graphic.components.medias.old 
{
	import com.bit101.components.ListItem;
	import flash.display.Shape;
	import flash.events.ErrorEvent;
	import flash.events.Event;
	import flash.events.LocationChangeEvent;
	import flash.geom.Rectangle;
	import flash.media.StageWebView;
	import fr.babos.graphic.components.base.BaseContainer;
	import fr.babos.graphic.components.base.ResizableComponent;
	
	/**
	 * Player video natif via un StageWebView.
	 * @author Pascal Achard
	 */
	public class NativeVideoContainer extends ResizableComponent 
	{
		
		
		/**
		 * L'URL de la vidéo.
		 */
		protected var videoURL:String;
		
		/**
		 * L'URL du poster.
		 */
		protected var posterURL:String;
		
		/**
		 * Joue automatiquement ?
		 */
		protected var autoPlay:Boolean;
		
		/**
		 * Passe en fullscreen
		 */
		
		/**
		 * Le StageWebView.
		 */
		protected var swv:StageWebView;
		
		/**
		 * Largeur du StageWebView.
		 */
		private var _swvWidth:uint;
		
		/**
<<<<<<< .mine
		 * Afficher / masquer la vidéo
		 */
		override public function get visible ():Boolean { return super.visible; }
		override public function set visible (value:Boolean):void
		{
			super.visible = value;
			
			refreshPosition();
		}
		
		/**
		 * La structure HTML5 du player.
=======
		 * Hauteur du StageWebView.
>>>>>>> .r120
		 */
<<<<<<< .mine
		protected var _htmlStruct:XML = <root>
			<part1><![CDATA[<!doctype html>
					<html>
						<head>
							<meta charset="utf-8" />
							<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
							<style type="text/css">
								* {
									margin: 0;
									padding: 0;
								}
								html, body {
									position: absolute;
									top: 0;
									right: 0;
									bottom: 0;
									left: 0;
									overflow: hidden;
									background-color: red;
								}
								#media
								{
									width: 100%;
									height: 100%;
								}
								#overlay
								{
									position: absolute;
									top: 0px;
									right: 0px;
									bottom: 0px;
									left:10px;
									background-repeat: no-repeat;
									background-position: center center;
									background-image: url('');
								}
				]]></part1>
			<part2><![CDATA[
							</style>
							<script type="text/javascript">
								var body;
								var media;
								var overlay;
								
								function preventMove (event)
								{
									event.preventDefault();
								}
								
								function init ()
								{
									body = document.getElementsByTagName("body")[0];
									
									document.addEventListener("touchmove", preventMove);
								}
								
								function loadVid (pUrl, pPoster, pAutoPlay, pGoFullscreen)
								{
									createVideoElement(pUrl, pPoster, pGoFullscreen);
									
									initOverlay();
									
									/*
									if (pAutoPlay)
										media.play();
									else if ("load" in media)
										media.load();
									*/
								}
								
								function createVideoElement (pUrl, pPoster, pGoFullscreen)
								{
									media = document.createElement("video");
									
									media.setAttribute("src", pUrl);
									media.setAttribute("poster", pPoster);
									media.setAttribute("id", "media");
									media.setAttribute("preload", "preload");
									//media.setAttribute("webkit-playsinline", "false");
									//media.setAttribute("webkit-playsfullscreen", "");
									//media.setAttribute("controls", pGoFullscreen ? "" : "controls");
									//media.setAttribute("controls", "controls");
									
									body.appendChild(media);
								}
								
								function initOverlay ()
								{
									overlay = document.createElement("div");
									
									overlay.setAttribute("id", "overlay");
									
									overlay.addEventListener("touchstart", overlayTapHandler);
									
									body.appendChild(overlay);
								}
								
								function overlayTapHandler (event)
								{
									video.play();
									video
								}
								
				]]></part2>
			<part3><![CDATA[
							</script>
						</head>
						<body onload="init()">
				]]></part3>
			<part4><![CDATA[
						</body>
					</html>
				]]></part4>
		</root>;
=======
		private var _swvHeight:uint;
		private var fullscreenOnPlay:Boolean;
>>>>>>> .r120
		
		/**
		 * Le fond.
		 */
		protected var _background:Shape;
		
		/**
		 * La structure HTML5 du player.
		 */
		protected var xmlHtml:XML = <![CDATA[<!doctype html>
									<html lang="en">
									<head>
									<meta charset="utf-8" />
									<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
									<style type="text/css">
									body {
										background-color:#CCC;
										width: 100%;
										height: 100%;
										position:relative;
									}
									* {
										margin:0;
										padding:0;
									}
									#media
									{
										width: 100%;
										height: 100%;
										z-index: 1;
									}
									#videoOverlay {
										display: none;
										position:absolute;
										z-index: 2;
										top:10px;
										right:10px;
										bottom:10px;
										left:10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url();
										
									}
									</style>
									<script type="text/javascript">
										var body;
										var media;
										var videoOverlay;
										
										function disableMove (event)
										{
											event.preventDefault();
										}
										
										function init ()
										{
											body = document.getElementsByTagName("body")[0];
											
											document.addEventListener("touchmove", disableMove);
										}
										
										function createVideoElement (pUrl, pPoster, pGoFullscreen)
										{
											media = document.createElement("video");
											
											media.setAttribute("src", pUrl);
											media.setAttribute("poster", pPoster);
											media.setAttribute("id", "media");
											media.setAttribute("controls", pGoFullscreen ? "" : "controls");
											
											body.appendChild(media);
											
											if ("load" in media)
												media.load();
										}
										
										function showOverlayElement ()
										{
											videoOverlay = document.getElementById("videoOverlay");
											videoOverlay.style.display = "block";
											
											videoOverlay.addEventListener("touchstart", goFullscreen);
											
											var fullScreenState = media.webkitDisplayingFullscreen;
											
											window.setInterval(function () {
												if (fullScreenState != media.webkitDisplayingFullscreen)
												{
													fullScreenState = media.webkitDisplayingFullscreen;
													
													if (!fullScreenState)
													{
														media.pause();
													}
												}
											}, 50);
										}
										
										
										function loadVid (pUrl, pPoster, pAutoPlay, pGoFullscreen)
										{
											init();
											
											createVideoElement(pUrl, pPoster, pGoFullscreen);
											
											if (pGoFullscreen)
												showOverlayElement();
											
											if (pAutoPlay)
												media.play();
										}
										
										function goFullscreen (event)
										{
											media.webkitEnterFullscreen();
											media.play();
										}
									</script>
									</head>
										<body>
											<div id="videoOverlay"></div>
										</body>
									</html>
		]]>;
		
		/**
		 * Constructeur.
		 */
		public function NativeVideoContainer(pVideoURL:String = "", pWidth:int = 320, pHeight:int = 240)
		{
			
			// On stock les dimensions.
			_localWidth 	= pWidth;
			_localHeight 	= pHeight;
			
			// On stock l'URL.
			videoURL = pVideoURL;
			
			createUI();
			
			// Si déjà URL on la load.
			if (videoURL != "") loadVideo(videoURL);
		}
		
		/**
		 * Joue une vidéo
		 * @param	pURL	L'URL de la vidéo à jouer.
		 */
		public function loadVideo(pVideoURL:String, pPosterURL:String = "", pAutoPlay:Boolean = false, pFullscreenOnPlay:Boolean = false):void 
		{
			// Si le swv n'est pas créer c'est certainement parce que le composant n'est pas sur le stage.
			if (!swv) throw new Error("Attention, le composant doit être placer dans la displayList pour fonctionner.");
			
			// On stock l'URL.
			if (pVideoURL != videoURL) videoURL = pVideoURL;
			
			// On stock l'URL du poster.
			posterURL = pPosterURL;
			
			// Autoplay ?
			autoPlay = pAutoPlay;
			
			// Passe en fullscreen automatiquement ?
			fullscreenOnPlay = pFullscreenOnPlay;
			
			// On charge la vidéo.
			swv.loadString(xmlHtml.toString());
		}
		
		/**
		 * Créer le stageWebView.
		 */
		protected function buildStageWebView():void 
		{
			swv = new StageWebView();
			
			// On écoute.
			swv.addEventListener(Event.COMPLETE, completeHandler);
			swv.addEventListener(ErrorEvent.ERROR, errorHandler);
			swv.addEventListener(LocationChangeEvent.LOCATION_CHANGE, locationChangeHandler);
			
			// On le configure.
			swv.stage = this.stage;
			swv.viewPort = new Rectangle(0, 0, _localWidth, _localHeight);
		}
		
		/**
		 * Ajouté au stage.
		 */
		override public function init():void 
		{
			super.init();
			
			// On créer les StageWebView.
			buildStageWebView();
			
			// On met en forme.
			layoutUI();
		}
		
		/**
		 * Nettoie ta chambre !
		 */
		override public function dispose():void 
		{
			super.dispose();
		}
		
		protected function createUI():void 
		{
			// On créer le fond.
			_background = new Shape();
			_background.graphics.beginFill(0x484848);
			_background.graphics.drawRect(0, 0, _localWidth, _localHeight);
			_background.graphics.endFill();
			addChild(_background);
			
		}
		
		protected function layoutUI():void 
		{
<<<<<<< .mine
			// Si on a un stageWebView
			if (_stageWebView != null)
			{
				if (super.visible)
				{
					// Récupérer le point de référence de la position de notre clip
					var registerPoint:Point = new Point();
					registerPoint = localToGlobal(registerPoint);
					
					// On lui applique un viewPort
					_stageWebView.viewPort = new Rectangle(
						registerPoint.x,
						registerPoint.y,
						_localWidth,
						_localHeight
					);
				}
				else
				{
					_stageWebView.viewPort = new Rectangle(-1, -1, 1, 1);
				}
			}
=======
			
			// Le fond.
			if (!_background) return;
			_background.width = _localWidth;			
			_background.height = _localHeight;

			// Le viewport du StageWebView.
			if (!swv) return;
			var globalRect:Rectangle = this.getRect(stage);
			swv.viewPort = globalRect;
>>>>>>> .r120
		}
		
		
		override protected function needReplace(pNeedResized:Boolean = false):void 
		{			
			super.needReplace(pNeedResized);
			
			layoutUI();
		}
		
		override protected function resized ():void
		{			
			// On met en place.
			layoutUI();
		}
		
		public function updateUi():void 
		{
			layoutUI();
		}
		
		/**
		 * Le chargement du StageWebView est terminé.
		 * @param	e
		 */
		private function completeHandler(e:Event):void 
		{			
			var str:String = "javascript:loadVid('" + videoURL + "', '" + posterURL + "', " + autoPlay + ", " + fullscreenOnPlay + ");";
			trace( "str : " , str );
			
			// On change les propriétés du player HTML5
			swv.loadURL(str);
		}
		
		/**
		 * Le Location du StageWebView change.
		 * @param	e
		 */
		private function locationChangeHandler(e:LocationChangeEvent):void 
		{
			//trace(e);
		}
		
		/**
		 * Il y a une erreur dans le StageWebView.
		 * @param	e
		 */
		private function errorHandler(e:ErrorEvent):void 
		{
			trace(e);
		}
	}
}